<template>
  <div>
    <!-- 定义面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品新增</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 定义卡片视图 -->
    <el-card class="box-card" >

      <!-- 定义页面提示信息 -->
      <el-alert title="新增商品流程" type="info" effect="dark" center show-icon :closable="false"></el-alert>

      <!-- 定义步骤条 字符串需要转化为数值 -->
      <el-steps :active="activeIndex - 0" finish-status="success" align-center>
        <el-step title="五星推荐"></el-step>
        <el-step title="四星推荐"></el-step>
        <el-step title="三星推荐"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>


      <!-- 定义标签页 before-leave:切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 -->
      <el-form :rules="addItemFormRules" ref="addItemFormRef" label-width="300px"
        label-position="top">
        <el-tabs v-model="activeIndex" :tab-position="'left'" >
          <el-tab-pane label="五星推荐" name="0">

            <el-form-item label="选择五星推荐商品" prop="price">
              <!-- 通过级联获取商品分类信息-->
              <el-cascader v-model="wuitemIds" :options="itemCatList" :props="props" >
              </el-cascader>
            </el-form-item>

            <el-form-item label="建议加注量(升)" prop="jialiang">
              <el-input v-model="addItemForm1.jialiang"></el-input>
            </el-form-item>
            <el-form-item label="基础油类型" prop="leixin">
              <el-input v-model="addItemForm1.leixin"></el-input>
            </el-form-item>
            <el-form-item label="级别" prop="jibie">
              <el-input v-model="addItemForm1.jibie" type="number"></el-input>
            </el-form-item>
            <el-form-item label="最优适度" prop="shidu">
              <el-input v-model="addItemForm1.shidu" type="number"></el-input>
            </el-form-item>
            <el-form-item label="适用粘度()" prop="liandu">
              <el-input v-model="addItemForm1.liandu"></el-input>
            </el-form-item>
            
          </el-tab-pane>

          <!-- 实现图片上传 multiple支持多选文件 -->
          <el-tab-pane label="四星推荐" name="1">
            <el-form-item label="选择四星推荐商品" prop="price">
              <!-- 通过级联获取商品分类信息-->
              <el-cascader v-model="siitemIds" :options="itemCatList" :props="props" >
              </el-cascader>
            </el-form-item>
            <el-form-item label="建议加注量(升)" prop="jialiang">
              <el-input v-model="addItemForm2.jialiang"></el-input>
            </el-form-item>
            <el-form-item label="基础油类型" prop="leixin">
              <el-input v-model="addItemForm2.leixin"></el-input>
            </el-form-item>
            <el-form-item label="级别" prop="jibie">
              <el-input v-model="addItemForm2.jibie" type="number"></el-input>
            </el-form-item>
            <el-form-item label="最优适度" prop="shidu">
              <el-input v-model="addItemForm2.shidu" type="number"></el-input>
            </el-form-item>
            <el-form-item label="适用粘度()" prop="liandu">
              <el-input v-model="addItemForm2.liandu"></el-input>
            </el-form-item>

          </el-tab-pane>


          <el-tab-pane label="三星推荐" name="2">
            <el-form-item label="选择三星推荐商品" prop="price">
              <!-- 通过级联获取商品分类信息-->
              <el-cascader v-model="sanitemIds" :options="itemCatList" :props="props" >
              </el-cascader>
            </el-form-item>
           <el-form-item label="建议加注量(升)" prop="jialiang">
             <el-input v-model="addItemForm3.jialiang"></el-input>
           </el-form-item>
           <el-form-item label="基础油类型" prop="leixin">
             <el-input v-model="addItemForm3.leixin"></el-input>
           </el-form-item>
           <el-form-item label="级别" prop="jibie">
             <el-input v-model="addItemForm3.jibie" type="number"></el-input>
           </el-form-item>
           <el-form-item label="最优适度" prop="shidu">
             <el-input v-model="addItemForm3.shidu" type="number"></el-input>
           </el-form-item>
           <el-form-item label="适用粘度()" prop="liandu">
             <el-input v-model="addItemForm3.liandu"></el-input>
           </el-form-item>
           <el-button type="primary" @click="addItemBtn">提交</el-button>
          </el-tab-pane>


        </el-tabs>
      </el-form>

    </el-card>




  </div>
</template>

<script>
  export default {
    data() {
      return {
        carId1: null,
        activeIndex: '0',
        addItemList:[],
        addItemForm1: {
          carId:null,
          itemId:null,
          jialiang: '',
          leixin: '',
         jibie: '',
          shidu: '',
          liandu:'',
          xingji:null
        },
        addItemForm2: {
          carId:null,
          itemId:null,
          jialiang: '',
          leixin: '',
         jibie: '',
          shidu: '',
          liandu:'',
          xingji:null
        },
        addItemForm3: {
         carId:null,
          itemId:null,
          jialiang: '',
          leixin: '',
         jibie: '',
          shidu: '',
          liandu:'',
          xingji:null
        },
        itemDesc: {
          itemDesc: ""
        },
        itemParam: {
          dynamicArray: [],
          staticArray: [],
          dynamicArgs: "",
          staticArgs: ""
        }
        ,
        addItemFormRules: {
          jialiang: [{
            //required: true,
            message: '请输入建议加注量(升)',
            trigger: 'blur'
          }],
          leixin: [{
            //required: true,
            message: '请输入基础油类型',
            trigger: 'blur'
          }],
          jibie: [{
           // required: true,
            message: '请输入级别',
            trigger: 'blur'
          }],
          shidu: [{
          // required: true,
           message: '请输入最优适度',
           trigger: 'blur'
          }],
          liandu:[{
            //required: true,
            message: '请输入适用粘度()',
            trigger: 'blur'
          }]

        },
        wuitemIds: [],
        siitemIds: [],
        sanitemIds: [],
        wuitemId: '',//5星id
        siitemId:'',//4星id
        sanitemId: '',//3星id
        itemCatList: [],
        props: {
          expandTrigger: 'hover',
          value: "itemId", //选中数据的value值
          label: "name", //选中数据展现名称
          children: "children", //自选项数据
        },
        //设置商品动态参数
        dynamicTableData: [],
        staticTableData: [],

        //定义文件上传路径地址
        uploadUrl: "http://localhost:8091/file/upload",
        //uploadUrl: "http://manage.harrylyj.com/file/upload",
        //定义图片网络访问地址
        imageUrlPath: "",
        //定义图片控制开关
        dialogImageVisible: false
      }
    },
    created() {
     this.carId1 =sessionStorage.getItem("carId")
        this.findItemCatList()
    },
    methods: {
      test(){
       for (var i = 0; i < this.wuitemIds.length; i++) {
         this.wuitemId = this.wuitemIds[1]
       }
       for (var i = 0; i < this.siitemIds.length; i++) {
         this.siitemId = this.siitemIds[1]
       }
       for (var i = 0; i < this.sanitemIds.length; i++) {
         this.sanitemId = this.sanitemIds[1]
       }

      },
      //1.获取所有商品分类信息
      async findItemCatList() {
        const {
          data: result } = await this.$http.get("/cartuijian/findItemCatList")
        if (result.status !== 200) return this.$message.error("查询商品分类信息失败")
        this.itemCatList = result.data
      },
      //修改商品分类选项
     /* changeCascader() {
        this.addItemForm.itemCatId = this.itemCatIds[2]
        //console.log(this.addItemForm.itemCatId)
      }, */
      //当标签页数据没有完成选择时 不让切换标签页
     /* beforeLeave(activeName, oldActiveName) {
        //console.log(this.itemCatIds.length)
        //console.log(typeof(oldActiveName))
        //注意oldActiveName的数据类型为字符串
        if (this.itemCatIds.length !== 3 && oldActiveName === '0') {
          this.$message.error("请先选择商品分类")
          return false
        }
      }, */

      //移除图片的方法

      //如果文件上传成功之后调用
      /* handleSuccess(response, file) {
        if (response.status !== 200) return this.$message.error("文件上传失败")
        file.name = response.data.fileName
        //获取虚拟路径
        let virtualPath = response.data.virtualPath
        //将数据封装到Form表单中
        this.addItemForm.images.push(virtualPath)
      },
 */
      /* 添加商品按钮 */
      async addItemBtn(){
        //console.log(this.addItemForm)

        //1.完成表单校验
        this.$refs.addItemFormRef.validate( valid => {
          if(!valid) return this.$message.error("请输入商品必填项")
        })



        this.test()



       this.addItemForm1.carId = this.carId1
        this.addItemForm2.carId = this.carId1
        this.addItemForm3.carId = this.carId1
        this.addItemForm1.itemId = this.wuitemId
        this.addItemForm2.itemId = this.siitemId
        this.addItemForm3.itemId = this.sanitemId
        this.addItemForm1.xingji = 5
        this.addItemForm2.xingji = 4
        this.addItemForm3.xingji = 3
        this.addItemList[0] = this.addItemForm1;
        this.addItemList[1] = this.addItemForm2;
        this.addItemList[2] = this.addItemForm3;
        console.log(1111111111111111)
        console.log("|||||||||||"+this.addItemList)
        console.log(1111111111111111)

        let {data: result} = await this.$http.post("/cartuijian/setTianjia",this.addItemList)
        if(result.status !== 200) return this.$message.error("商品添加失败")
        this.$message.success("商品添加成功")

        //2.5添加完成之后,将数据重定向到商品展现页面
        this.$router.push("/item")
      }
    }
  }
</script>

<style lang="less" scoped>
  .el-steps {
    margin: 20px 0;
  }
  .el-card{
    width: 100%;
  }
  .el-cascader {
    width: 30%;
  }

  /* 控制复选框的右边距5像素 !important 表示优先执行 IE6不兼容*/
  .el-checkbox {
    margin: 0 10px 0 0 !important;
  }

  .addItemBtnClass{

    margin-top: 15px;
  }

</style>
